﻿@{
    Script.Include("https://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js").AtHead();
    Script.Require("jQuery").AtHead();
    Script.Require("KO").AtHead();
}
@model SoNerdy.Player.Models.PlayerMediaViewModel

@using (Script.Head()) {
    <script type="text/javascript">
        function playerPartViewModel(model) {
            $this = this;
            $this.Media = ko.observableArray();            
            $.each(model, function (i, media) {
                $this.Media.push(createMediaViewModel(media));
            });
            $this.addMedia = function() {
                $this.Media.push(createMediaViewModel({
                    Title: "", 
                    Files: [{Url:"", ContentType:""}],
                    Width: 640,
                    Height: 480
                }));
            };    
            $this.removeMedia = function(media) {
                $this.Media.remove(media);
            };      
            $("body").submit(function() {            
                var js = ko.toJS($this.Media);                
                var json = JSON.stringify(js);
                $("#player-media-json").val(json);                
            });
        }

        function createMediaViewModel(media) {
            var newMedia = {
                Title: ko.observable(media.Title),
                MediaType: ko.observable(media.MediaType),
                Height: ko.observable(media.Height),
                Width: ko.observable(media.Width)
            };
            newMedia.isVideo = ko.computed(function() {
                return newMedia.MediaType() === "Video";
            });
            newMedia.Files = ko.observableArray();
            $.each(media.Files, function(i, file) {
                newMedia.Files.push({
                        Url: ko.observable(file.Url), 
                        ContentType: ko.observable(file.ContentType)
                });
            });            
            newMedia.addFile = function() {
                newMedia.Files.push({ Url: ko.observable(""), ContentType: ko.observable("") });
            };
            newMedia.removeFile = function(file) {
                newMedia.Files.remove(file);
            };
            return newMedia;
        }

        function setupMediaPicker(model) {    
            ko.applyBindings(new playerPartViewModel(model));        
        }
        
        $(function() {
            var playerPartModel = @Html.Raw(Model.MediaJSON);
            setupMediaPicker(playerPartModel);        
        });        
    </script>    
}
<fieldset id="playerPartEditor">
    <legend>Media</legend>
    <p class="hint">You may add one or more media elements.</p>
    <div data-bind="foreach: Media" style="border:1px solid #ccc;padding:8px;margin-top:5px;margin-bottom:5px;">
        <label>Title</label>   
        <span class="hint">(optional) a subtitle will be displayed with your media</span>
        <input class="textMedium" type="text" data-bind="value: Title" />
        <label>Media Type</label>   
        <select data-bind="value:MediaType">
            <option value="Video">Video</option>
            <option value="Audio">Audio</option>
        </select>
        <span data-bind="visible: isVideo()">
            <span>Height</span>
            <input type="text" data-bind="value:Height"/>                  
            <span>Width</span>
            <input type="text" data-bind="value:Width"/>                  
        </span>
        <div>
            <h3>Files</h3>
            <p class="hint">
                Providing more than one file format is helpful for reaching more devices/browsers.  
                See current advice from <a href="http://videojs.com/" target="_blank">VideoJS</a>
            </p>
            <div data-bind="foreach: Files" >
                <div>
                    <span>Url</span>
                    <input type="text" class="textMedium" data-bind="value:Url" />
                
                    <span>Content Type</span>
                    <select data-bind="value: ContentType">
                        <option value="video/mp4">video/mp4</option>
                        <option value="video/webm">video/webm</option>
                        <option value="video/x-flv">video/x-flv</option>
                        <option value="video/webm">audio/mp3</option>                    
                    </select>
                    <a href="#" data-bind="click: $parent.removeFile">remove file</a>
                </div>
            </div>
            <a href="#" data-bind="click:addFile">add file</a>
        </div>
        <a href="#" data-bind="click:$parent.removeMedia">remove media</a>
    </div>
    <a href="#" data-bind="click:addMedia">add media</a>
    <input id="player-media-json" type="hidden" name="Player.MediaJSON" />
</fieldset>